React Development with the Shards React Library — Button Groups and Containers

Shards React is a useful UI library that lets us add many components easily into our React app.

In this article, we’ll look at how to use it to add components to our React app.

Button Group

We can add button groups into our React app with Shard Reacr’s ButtonGroip component:

import React from "react";
import { Button, ButtonGroup } from "shards-react";
import "shards-ui/dist/css/shards.min.css";

export default function App() {
  return (
    <div className="App">
      <ButtonGroup>
        <Button>Left</Button>
        <Button>Middle</Button>
        <Button>Right</Button>
      </ButtonGroup>
    </div>
  );
}

We can change the group size with the size prop:

import React from "react";
import { Button, ButtonGroup } from "shards-react";
import "shards-ui/dist/css/shards.min.css";

export default function App() {
  return (
    <div className="App">
      <ButtonGroup size="lg">
        <Button>Left</Button>
        <Button>Middle</Button>
        <Button>Right</Button>
      </ButtonGroup>
    </div>
  );
}

We can also set it to sm or leave it out.

And we can make the group vertical with the vertical prop:

import React from "react";
import { Button, ButtonGroup } from "shards-react";
import "shards-ui/dist/css/shards.min.css";

export default function App() {
  return (
    <div className="App">
      <ButtonGroup vertical>
        <Button>Left</Button>
        <Button>Middle</Button>
        <Button>Right</Button>
      </ButtonGroup>
    </div>
  );
}

Button Toolbar

We can add a button toolbar with the ButtonToolbar component:

import React from "react";
import {
  Button,
  ButtonGroup,
  ButtonToolbar,
  FormInput,
  InputGroup
} from "shards-react";
import "shards-ui/dist/css/shards.min.css";

export default function App() {
  return (
    <div className="App">
      <ButtonToolbar>
        <ButtonGroup size="sm">
          <Button>Create</Button>
          <Button>Edit</Button>
        </ButtonGroup>

        <InputGroup size="sm" className="ml-auto">
          <FormInput placeholder="Search..." />
        </InputGroup>
      </ButtonToolbar>
    </div>
  );
}

We can add ButtonGroup and InputGroup inside a ButtonToolbar .

Card

Cards let us add containers for content into our React app.

To add it, we write:

import React from "react";
import {
  Card,
  CardHeader,
  CardTitle,
  CardImg,
  CardBody,
  CardFooter,
  Button
} from "shards-react";
import "shards-ui/dist/css/shards.min.css";

export default function App() {
  return (
    <div className="App">
      <Card style={{ maxWidth: "300px" }}>
        <CardHeader>Card header</CardHeader>
        <CardImg src="https://place-hold.it/300x200" />
        <CardBody>
          <CardTitle>Lorem Ipsum</CardTitle>
          <p>Lorem ipsum.</p>
          <Button>Read more</Button>
        </CardBody>
        <CardFooter>Card footer</CardFooter>
      </Card>
    </div>
  );
}

We add a card with various parts.

Card is the card container.

CardHeader has the card header.

CardImg has the card image.

CardBody has the card body.

CardTitle has the card title.

CardFooter has the card footer.

Container

We can use the Collapse component to toggle the visibility of our content.

For instance, we can write:

import React from "react";
import { Container, Row, Col } from "shards-react";
import "bootstrap/dist/css/bootstrap.min.css";
import "shards-ui/dist/css/shards.min.css";

export default function App() {
  return (
    <div className="App">
      <Container>
        <Row>
          <Col sm="12" lg="6">
            1 / 2
          </Col>
          <Col sm="12" lg="6">
            2 / 2
          </Col>
        </Row>
      </Container>
    </div>
  );
}

to add the Container com0ponent to add a flexbox container.

Row has the rows. And Col has the columns.

We set the sm and lg props to set the column sizes for those breakpoints.

Conclusion

We can add button groups and containers into our React app with Shards React.